<template>
  <scroll class="suggest" :data="result" ref="suggest" @beforeScroll="listScroll" :beforeScroll="beforeScroll">
    <ul class="suggest-list">
      <li  v-for="(item,index) in result" @click="selectItem(item)" class="suggest-item" :key="index">
        <div class="icon">
          <i class="icon-music"></i>
        </div>
        <div class="name">
          <p class="text">{{item.name}}</p>
        </div>
      </li>
    </ul>
    <div v-show="!result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
import { createSong } from 'common/js/song'
import Scroll from 'base/scroll/scroll'
import { mapMutations, mapActions } from 'vuex'
import NoResult from 'base/no-result/no-result'
import {likeSongOfName} from 'api/index'

export default {
  props: {
    query: {
      type: String,
      default: ''
    },
    showSinger: {
      type:Boolean,
      default: true
    }
  },
  data() {
    return {
      page: 1,
      result: [],
      beforeScroll: true
    }
  },
  methods: {
    search() {
      if(this.query) {
        likeSongOfName(this.query).then(res => {
          if (res) {
            let ret = []
            res.forEach(item => {
              ret.push(createSong(item))
            })
            this.result = ret
            //console.log(this.result)
          }
        })
      }
    },
    selectItem(item) {  //将点击的搜索列表的歌曲插入到playlist和顺序播放列表，并将这一事件发送出去
      this.insertSong(item)
      this.$emit('select')
    },
    refresh() {
      this.$refs.suggest.refresh()
    },
    listScroll() {
      this.$emit('listScroll')
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    }),
    ...mapActions([
      'insertSong'
    ])
  },
  watch: {
    query() {
      this.search()
    }
  },
  components: {
    Scroll,
    NoResult
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"

.suggest
  height 100%
  overflow hidden
  .suggest-list
    padding 0 30px
    .suggest-item
      display flex
      align-items center
      padding-bottom 20px
    .icon
      flex 0 0 30px
      width 30px
    .name
      flex 1
      font-size $font-size-medium
      color $color-text-d
      overflow hidden
      .text
        no-wrap()
  .no-result-wrapper
    position absolute
    width 100%
    top 50%
    transform translateY(-50%)

</style>
